<template>
	<view class="main">	
		<view class="item">
			<button hover-class="none" plain="true" @click="lightClick" style="border: none;">
				<view v-show="light_state">
					<image :src="light_icon_state.on" mode="scaleToFill"></image>
				</view>
				<view v-show="!light_state">
					<image :src="light_icon_state.off" mode="scaleToFill"></image>
				</view>
			</button>
		</view>
		<view v-show="light_state">
			<view v-for="(item,index) in sliders" :key="index">
				<view class="item">
					<view>
						<u-row>
							<u-col span="2">
								<view class="slider_text">{{item.name}}</view>
							</u-col>
							<u-col span="10">
								<u-slider v-model="item.value" min="0" max="255" :activeColor="item.color"
									showValue="true" @change="RGBChange"></u-slider>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sliders: [{
						name: '红',
						color: 'red',
						value: 0
					},
					{
						name: '绿',
						color: 'green',
						value: 0
					},
					{
						name: '蓝',
						color: 'blue',
						value: 0
					},
				],
				light_icon_state: {
					on: '/static/icon/dengpao_on.svg',
					off: '/static/icon/dengpao_off.svg'
				},
				light_state: false,
				red: 0,
				green: 0,
				blue: 0,
				subscription: {
					topic: '/light/led1/state',
					qos: 0
				},
				publish: {
					topic: '/light/led1/control',
					payload: {
						
					},
					qos: 0,
					retain: true
				}
			}
		},
		methods: {
			lightClick() {
				if (this.light_state) {
					this.light_state = !this.light_state
					this.setRGB(0,0,0)
				} else {
					this.light_state = !this.light_state
					this.setRGB(255,255,255)
				}
			},
			RGBChange() {
				var rgb = {
					r: this.sliders[0].value,
					g: this.sliders[1].value,
					b: this.sliders[2].value
				}
				this.publish.payload = JSON.stringify(rgb)
				this.mqtt.publish(this.publish.topic,this.publish.payload,this.publish.qos)
			},
			setRGB(r,g,b) {
				this.sliders[0].value = r
				this.sliders[1].value = g
				this.sliders[2].value = b
				
				var rgb = {
					r: this.sliders[0].value,
					g: this.sliders[1].value,
					b: this.sliders[2].value
				}
				this.publish.payload = JSON.stringify(rgb)
				this.mqtt.publish(this.publish.topic,this.publish.payload,this.publish.qos)
			}

		},
		onLoad() {
			this.mqtt.subscribe(this.subscription.topic, this.subscription.qos)
			this.mqtt.on('message', (topic, message) => {
				message = JSON.parse(message)
				if (message.r == 0 && message.g == 0 && message.b == 0) {
					this.light_state = false
				} else {
					this.sliders[0].value = message.r
					this.sliders[1].value = message.g
					this.sliders[2].value = message.b
					this.light_state = true
				}
			})
		},
		onUnload() {
			this.mqtt.unsubscribe(this.subscription.topic)
		}
	}
</script>

<style>
	.main {
		margin: 0 10px 10px 10px;
	}

	.item {
		margin-top: 10px;
	}

	.slider_text {
		text-align: center;
	}
</style>
